<template>
  <el-dialog
    class="department-site-dialog"
    title="系统权限管理"
    :visible.sync="dialogFormVisible"
    :close-on-click-modal="false"
    width="90%"
    :append-to-body="true"
    @close="$emit('closeSite')">
    <div class="filter-container" style="padding-bottom:10px;">
      <el-form ref="form" class="query-condition" @submit.native.prevent>
        <el-select
          v-model="platformId"
          clearable
          style="width: 150px;"
          @change="changePlatform">
          <el-option
            v-for="item in platformOptions"
            :key="item.id"
            :label="item.platformName"
            :value="item.id" />
        </el-select>
        <el-button
          v-permission-button="'ITPS-ADD'"
          class="filter-item icon-green"
          size="mini"
          type="success"
          icon="el-icon-plus"
          @click="addForm">
          增加管辖区间站场
        </el-button>
      </el-form>
    </div>
    <div ref="main">
      <el-table
        v-if="height>0"
        ref="multipleTable"
        v-loading="listLoading"
        :data="tableData"
        row-key="id"
        :height="height"
        :default-expand-all="true"
        style="width: 100%"
        border>
        <el-table-column
          label="序号"
          align="center"
          type="index"
          width="50" />
        <el-table-column width="200" show-overflow-tooltip label="功能模块名称">
          <template slot-scope="{row}">{{ row.moduleName }}</template>
        </el-table-column>
        <el-table-column width="70" align="center" show-overflow-tooltip label="平台">
          <template slot-scope="{row}">{{ row.platformName }}</template>
        </el-table-column>
        <el-table-column width="70" align="center" label="全选">
          <template slot-scope="{row}"><el-checkbox v-model="modulezt" :indeterminate="isIndeterminate" @change="handleCheckAllChange" /></template>
        </el-table-column>
        <el-table-column
          label="功能操作名称（编码）">
          <template slot-scope="{row,$index}">
            <el-row :gutter="5">
              <el-col
                v-for="item in row.actionList"
                :key="item.actionId"
                style="overflow:hidden;"
                :span="8"
                :title="item.description">
                <el-checkbox-group v-model="checkedCities">
                  <el-checkbox :checked="item.checkFlag" :label="item.actionId" @change="updateData(row,item.description)">{{ item.description }}（{{ item.actionName }}）</el-checkbox>
                </el-checkbox-group>
              </el-col>
            </el-row>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- <add-site ref="addSite" :dept-attr="deptAttr" @addSite="addSite" />-->
    <div slot="footer" class="dialog-footer">
      <el-button @click="$emit('closeSite');dialogFormVisible = false;">
        取消
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import { groutList, grouUpdate, groupById } from '@/api/dsc/sysm/user/power'
import { getPlatform } from '@/api/dsc/sysm/user/group'
import AddSite from './SiteAdd'
export default {
  name: 'DeptSystem',
  components: {
    AddSite
  },
  props: {
    deptAttr: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      height: 280, // table高度
      tableData: [], // 表格数据
      platformOptions: [],
      platformId: '',
      checkedCities: [],
      isIndeterminate: true,
      listQuery: {
        // 搜索条件
        deptId: '',
        page: 1,
        size: 20
      },
      listLoading: false,
      total: 0,
      dialogFormVisible: false,
      modulezt: true
    }
  },
  watch: {
    dialogFormVisible(val) {
      if (val) {
        this.listQuery.deptId = this.deptAttr.deptId
        this.getList()
      }
    }
  },
  created() {
    getPlatform({ page: 0, size: 50 }).then(res => {
		  this.platformOptions = res.data.records
    })
  },
  mounted() {},
  methods: {
    // 查询列表
    getList(platformId) {
      // var deptId = Object.assign({}, )
      //  console.log("1",deptId)
      // groupById(this.deptAttr.deptId).then(response => {
      //   console.log(response)
      // })
      this.listLoading = true

      const _platformId = platformId || ''
      groupById(this.deptAttr.deptId, _platformId).then(response => {
        this.tableData = response.data
        // Just to simulate the time of the request
        setTimeout(() => {
          this.listLoading = false
        }, 0 * 1000)
      }).catch(() => {
        this.listLoading = false
      })
    },
    changePlatform(val) {
      this.getList(val)
    },
    // 增加管辖区间站场回调
    addSite(data) {
      this.total++
      this.tableData.unshift(data)
    },
    // 增加管辖区间站场
    addForm() {
      this.$refs.addSite.dialogFormVisible = true
    },
    handleCheckAllChange(val) {
      console.log(val)

      // this.checkedCities = val ? cityOptions : []
      // this.isIndeterminate = false
    },
    updateData(params, formName) {
      // var param={}
      // params.actionList.forEach(row => {
      //   param.model = row.actionList
      //   param.actionIds = row.moduleId
      //   param.platformId =platformId
      //   param.moduleId = moduleId
      //   param.groupId = this.deptAttr.deptId
      //   if(row.description===index){
      //     row.checkFlag = !row.checkFlag
      //   }
      // })
      // this.validate().then(() => {
      //   this.saveOrUpdate(this.temp, 2)
      // })
      var list = {
        groupId: this.deptAttr.deptId,
        modulePermissionList: [
          {
            platformId: params.platformId,
            moduleId: params.moduleId,
            actionIds: []
          }
        ]
      }
      params.actionList.forEach((row, index) => {
        if (row.description === formName) {
          row.checkFlag = !row.checkFlag
        }
        if (row.checkFlag) {
          list.modulePermissionList[0].actionIds.push(row.actionId)
        }
      })
      console.log(params.actionList)
      const param = Object.assign({}, list)
      grouUpdate(param).then(response => {
        console.log(response)
      })
    },
    // type 1 添加，2 编辑
    saveOrUpdate(params, type) {
      this.listLoading = true
      const param = Object.assign({}, params)
      saveOrUpdate(param).then(response => {
        if (this.dialog.title === '添加') {
          this.tableData.unshift(response.data)
          this.total++
          // 左侧树新增节点
          const [obj, id] = [{
            id: response.data.id,
            label: response.data.deptName,
            children: []
          }, response.data.parentId ? response.data.parentId : '']
          this.$refs.tree_box.append(obj, id)
          this.$refs.tree_box1.appendNode(obj, id)
        } else {
          Object.assign(this.rowObj, response.data)
          // 左侧树编辑节点
          this.$refs.tree_box.getNode(response.data.id).data.label = response.data.deptName
          if (this.$refs.tree_box1) {
            this.$refs.tree_box1.updateNode(response.data.id, response.data.deptName)
          }
        }
        this.notifiySuccess('保存成功')
        this.dialog.visible = false
        this.listLoading = false
      }).catch(() => {
        this.listLoading = false
      })
    },
    // 取消管辖
    cancelSite(row, $index) {
      this.confirmBox('确定删除?').then(() => {
        deleteSiteById(row.id).then(response => {
          this.notifiySuccess('删除成功!')
          // this.tableData.splice($index, 1)
          // this.total--
          this.getList()
        })
      })
    }
  }
}
</script>
<style lang="scss">
.department-site-dialog{
  .el-dialog__body{
    padding: 20px 0 0;
  }
}
</style>
